<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块module</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <h2>创建模块</h2>
    <div ng-app="app01" ng-contraller="ctrl01" >

    </div>
    <script>
        var app01=angular.module("app01",[]);
    </script>
    <h2>添加控制器</h2>
    <div ng-app="app02" ng-controller="ctrl02" id="app02">
        {{name}}
    </div>
    <script>
        var app02=angular.module("app02",[]);
        app02.controller("ctrl02",function ($scope) {
            $scope.name=213413213;
        });
        angular.bootstrap(document.getElementById("app02"),["app02"]);
    </script>
    <h2>添加指令</h2>
    <div ng-app="app03" ng-controller="ctrl03" id="app03">
        <div runoob-directive></div>
        {{name}}
        <hello></hello>
    </div>
    <script>
        var app03 = angular.module("app03", []);
        app03.controller("ctrl03",function ($scope) {
            $scope.name="app03";
        });
        app03.directive('runoobDirective', function() {
            return {
                template: '<b>自定义标签：创建时用驼峰法，用的时候横线分隔。</b>',
            };
        });
        app03.directive('hello', function() {
            return {
                restrict: 'E',
                template: '<div><b>E:</b>元素<b>A:</b>属性<b>C:</b>样式<b>M:</b>注释</div>',
                replace: true
            };
        });
        angular.bootstrap(document.getElementById("app03"),["app03"]);
    </script>
</body>
</html>